<template>
  <div v-show="showSwiper">
    <div v-if="equ !== 'pc'" class="xforce-swiper-box">
      <SwiperCard v-if="cfg.swiper_type === 'cards'" :cfg="cfg" />
      <SwiperCenter v-else-if="cfg.swiper_type === 'center' || cfg.swiper_type === 'center-border'" :cfg="cfg" />
      <SwiperPure v-else-if="cfg.swiper_type === 'pure'" :cfg="cfg" />
      <SwiperNormal v-else :cfg="cfg" />
    </div>
    <template v-else>
      <SwiperCenterPc v-if="cfg.swiper_type === 'center'" :cfg="cfg" />
      <SwiperRightPc v-else-if="cfg.swiper_type === 'right'" :cfg="cfg" />
      <SwiperNormal v-else :cfg="cfg" />
    </template>
  </div>
</template>

<script lang="ts" setup name="UISwiper">
import { equ } from '../../../../package-env';

const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});
const showSwiper = ref(false)

const changShow = () => {
  showSwiper.value = true
}

provide('changeShow', changShow)
</script>